/**
 *  styles-components 例子
 */
import React, { useState, useEffect } from 'react';
import styles from './index.less';


function addClass(str) {
  let style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = str;
  document.querySelector('head').appendChild(style);
}

function styledButton(data) {
  var str = data[0];

  return class extends React.Component {
    state = {
      classKey: 'aaa',
    };
    componentDidMount = () => {
      var classStr = `
        .${this.state.classKey}{
          ${str}
        }
      `;
      addClass(classStr);
    };

    render() {
      return <div className={this.state.classKey}>{this.props.children}</div>;
    }
  };
}

var Button = styledButton`
  padding: 32px;
  background-color: hotpink;
  font-size: 24px;
  border-radius: 4px;
  color: black;
  font-weight: bold;
  &:hover {
    color: white;
  }
`;

export default class extends React.Component {
  componentDidMount = () => {};
  render() {
    return (
      <div>
        <Button>123123</Button>
      </div>
    );
  }
}
